<template>
  <div class="teamPerformance">

    <div class="filterTable">
      <div class="exhibitionHall" v-if="roleList.SalesConsultant || roleList.ShowroomManager">
        <p>展厅销售团队绩效</p>
        <FilterTable
          ref="table"
          :columns="columns1"
          height="auto"
          :dataSource="dataSource1"
          :isPagination="false"
          :isSelectColumn="false"
          selectionType="single"
          :onRowSelectChange="selectChangeHandle"
          :onColumnsChange="columns1 => this.columns1 = columns1"
        ></FilterTable>
      </div>
      <div class="netSales" v-if="roleList.NetSalesConsultant || roleList.NetSalesManager">
        <p>网销团队绩效</p>
        <FilterTable
          ref="table"
          :columns="columns2"
          height="auto"
          :dataSource="dataSource2"
          :isPagination="false"
          :isSelectColumn="false"
          selectionType="single"
          :onRowSelectChange="selectChangeHandle"
          :onColumnsChange="columns2 => this.columns2 = columns2"
        ></FilterTable>
      </div>
    </div>
  </div>
</template>

<script>
import {
  queryTeamAchievementForHall,
  queryTeamAchievementForNet,
  qryHallSalesTeamReport
} from '@/api/dashboard/index';
import DataMerge from "@/components/DataMerge";
import { ObjectAssign } from "@/components/DataMerge";
export default {
  name: 'TeamPerformance',
  props: {
    rowDate: {
      type: Object,
      default: () => ({})
    },
    rowData: {
      type: Object,
      default: () => ({})
    },
    roleList: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      columns1: this.createTableColumns1(),
      fetchParams1: {},
      dataSource1: [],
      columns2: this.createTableColumns2(),
      fetchParams2: {},
      dataSource2: [],
    }
  },
  watch: {
    rowDate(newDate){
      if (this.roleList.SalesConsultant || this.roleList.ShowroomManager) {
        this.getTeamAchievementForHall(newDate)
      }
      if (this.roleList.NetSalesConsultant || this.roleList.NetSalesManager) {
        this.queryTeamAchievementForNet(newDate)
      }
    }
  },
  created() {
    // this.queryTeamAchievementForHall(this.rowDate)
    if (this.roleList.SalesConsultant || this.roleList.ShowroomManager) {
      this.getTeamAchievementForHall(this.rowDate)
    }
    if (this.roleList.NetSalesConsultant || this.roleList.NetSalesManager) {
      this.queryTeamAchievementForNet(this.rowDate)
    }
  },
  methods: {
    createTableColumns1() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '姓名',
          dataIndex: 'consultantName',
          filterType: 'input'
        },
        {
          title: '进店',
          dataIndex: 'passengerCount',
          sorter: true,
          filterType: 'input'
        },
        {
          title: '新建客档',// 新增潜客就是留档量
          dataIndex: 'fileCount',
          sorter: true,
          filterType: 'input'
        },
        {
          title: '留档率',
          dataIndex: 'intentBrandName',
          sorter: true,
          filterType: 'input'
        },
        // {
        //   title: '订单',
        //   dataIndex: 'submitCount',
        //   sorter: true,
        //   filterType: 'input'
        // },
        // {
        //   title: '订单率',
        //   dataIndex: 'OrderRates',
        //   sorter: true,
        //   filterType: 'input'
        // },
        // {
        //   title: '成交',
        //   dataIndex: 'completeCount',
        //   sorter: true,
        //   filterType: 'input'
        // },
        // {
        //   title: '成交率',
        //   dataIndex: 'closing',
        //   sorter: true,
        //   filterType: 'input'
        // },
      ];
    },
    createTableColumns2() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '姓名',
          dataIndex: 'consultantName',
          filterType: 'input'
        },
        {
          title: '新增线索',
          dataIndex: 'newClueCount',
          sorter: true,
          filterType: 'input'
        },
        {
          title: '有效线索',
          dataIndex: 'validClueCount',
          sorter: true,
          filterType: 'input'
        },
        {
          title: '邀约量',
          dataIndex: 'inviteCount',
          sorter: true,
          filterType: 'input'
        },
        {
          title: '邀约率',
          dataIndex: 'OfferRate',
          sorter: true,
          filterType: 'input'
        },
        {
          title: '邀约到店',
          dataIndex: 'arriveCount',
          sorter: true,
          filterType: 'input'
        },
        {
          title: '邀约到店率',
          dataIndex: 'InvitationToTheStoreRate',
          sorter: true,
          filterType: 'input'
        },
      ];
    },
    async getTeamAchievementForHall(rowDate){
      if (rowDate.consultant === 0) {
        delete rowDate.consultant
      }
      this.formDate = rowDate;
      // ObjectAssign([queryTeamAchievementForHall,qryHallSalesTeamReport], "consultant", rowDate, dataSource =>{
      //   console.log('-=-=-=---=-=-=-=-=-=-=-=-=',dataSource);
      //   var newArr = this.sort(dataSource, 'passengerCount');
      //   newArr.forEach(x=>{
      //     x['intentBrandName'] = this.GetPercent(x.fileCount,x.passengerCount)
      //     x['OrderRates']  = this.GetPercent(x.submitCount,x.passengerCount)
      //     x['closing'] = this.GetPercent(x.completeCount,x.passengerCount)
      //   })
      //   // console.log(newArr)
      //   this.dataSource1 = newArr;
      // })

      const res = await queryTeamAchievementForHall(rowDate);
      console.log('-=-=-=---=-=-=-=-=-=-=-=-=',res);
      var newArr = this.sort(res.data, 'passengerCount');
      console.log('-=-=-=---=-=-=-=-=-=-=-=-=',newArr);
      newArr.forEach(x=>{
          x['intentBrandName'] = this.GetPercent(x.fileCount,x.passengerCount)
          x['OrderRates']  = this.GetPercent(x.submitCount,x.passengerCount)
          x['closing'] = this.GetPercent(x.completeCount,x.passengerCount)
        })
        // console.log(newArr)
        this.dataSource1 = newArr;



    },
    async queryTeamAchievementForNet(rowDate) {
      if (rowDate.consultant === 0) {
        delete rowDate.consultant
      }
      this.formDate = rowDate;
      const res = await queryTeamAchievementForNet(rowDate);
      if (res.resultCode === 200) {
        // console.log(res.data)
        res.data.forEach(x=>{
          x['OfferRate'] = this.GetPercent(x.inviteCount,x.validClueCount)
          x['InvitationToTheStoreRate']  = this.GetPercent(x.arriveCount,x.inviteCount)
        })
        this.dataSource2 = res.data;
      }
    },
    async queryTeamAchievementForHall(rowDate) {
      if (rowDate.consultant === 0) {
        delete rowDate.consultant
      }
      this.formDate = rowDate;
      const res = await queryTeamAchievementForHall(rowDate);
      if (res.resultCode === 200) {
        // console.log(res.data)
        this.qryHallSalesTeamReport(rowDate,res.data)
      }
    },
    async qryHallSalesTeamReport(rowDate) {
      // if (rowDate.consultant === 0) {
      //   delete rowDate.consultant
      // }
      // this.formDate = rowDate;
      const res = await qryHallSalesTeamReport(rowDate);
      if (res.resultCode === 200) {
        console.log(res.data)
      }
    },
    selectChangeHandle(rows) {
      if (!rows.length) return;
      this.selectedRow = rows[0];
    },
    sort(Arr, s){
      var min;
      for(var i=0; i<Arr.length; i++){
        for(var j=i; j<Arr.length;j++){
          if(Arr[i][s]>Arr[j][s]){
            min=Arr[j];
            Arr[j]=Arr[i];
            Arr[i]=min;
          }
        }
      }
      return Arr;
    },
    // 求百分比
    GetPercent(num, total) {
      num = parseFloat(num);
      total = parseFloat(total);
      if (isNaN(num) || isNaN(total)) {
          return "-";
      }
      return total <= 0 ? "0%" : (Math.round(num / total * 10000) / 100.00)+"%";
    }
  },
};
</script>

<style scoped lang="less">
.teamPerformance{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  background:#F2F4F8;
  border-radius: 2px;
  .filterTable{
    width: 100%;
    // padding: 10px;
    .exhibitionHall,.netSales{
      background: #fff;
      padding-bottom: 24px;
      p{
        color: @mostColor;
        font-weight:500;
        font-size:16px;
        line-height: 58px;
        border-bottom: 1px solid rgba(0,4,10,0.08);
        padding-left: 24px;
      }
    }
    .netSales{
      margin-top: 10px;
    }
  }
}
</style>
